<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head>
<div th:replace="common/common :: headblock('jobcode')"></div>
<!--  引入自定义CSS -->

<!--begin code mirror -->
<!--下面两个是使用Code Mirror必须引入的-->
<link rel="stylesheet" href="/jslib/codemirror/lib/codemirror.css" />

<!--引入css文件，用以支持主题-->
<link rel="stylesheet" href="/jslib/codemirror/theme/dracula.css" />

<!--支持代码折叠-->
<link rel="stylesheet" href="/jslib/codemirror/addon/fold/foldgutter.css" />

<!--支持代码联想提示-->
<link rel="stylesheet" href="/jslib/codemirror/addon/hint/show-hint.css" />

<!--end Code Mirror -->

<style type="text/css">
.CodeMirror {
	font-size: 16px;
	width: 100%;
	height: 100%;
	/*bottom: 0;*/
    /*top: 0px;*/
	/*position: absolute;*/
}
</style>
</head>

<body class="skin-blue fixed layout-top-nav">
	<div class="wrapper">

		<header class="main-header">
			<nav class="navbar navbar-static-top">
				<div class="container">
					<div class="navbar-header">
						<a class="navbar-brand"><b>Web</b>IDE</a>
					</div>

					<div class="collapse navbar-collapse pull-left"
						id="navbar-collapse">
						<ul class="nav navbar-nav">
							<li class="active"><a href="javascript:editWebIdeTile();">
							<span>【GLUE(</span>
							<span>Shell</span>
							<span>)】</span>
							<span>人工智能计算平均值</span>
							</a></li>
						</ul>
					</div>

					<div class="collapse navbar-collapse pull-right"
						id="navbar-collapse">
						<ul class="nav navbar-nav">
							<li id="save"><a href="javascript:saveFunction();">
							<i class="fa fa-fw fa-save"></i> <span>保存</span>
							</a></li>
						</ul>
					</div>
					<!-- 
                    <div class="navbar-custom-menu">
                        <ul class="nav navbar-nav" >
                            <li id="save" >
								<a href="javascript:;" >
									<i class="fa fa-fw fa-save" ></i>
                                    <span>保存</span>
								</a>
							</li>
                        </ul>
                    </div>
                     -->
				</div>
			</nav>
		</header>

		<div class="content-wrapper" id="ideWindow"></div>
	</div>
	
<!-- 更新.模态框 -->
<div class="modal fade" id="editTileModal" tabindex="-1" role="dialog"  aria-hidden="true">
    <div class="modal-dialog modal-lg">
        <div class="modal-content">
            <div class="modal-header">
                <h4 class="modal-title" >修改job标题</h4>
            </div>
            <div class="modal-body">
                <form class="form-horizontal form" role="form" >
                    <div class="form-group">
                        <label for="firstname" class="col-sm-2 control-label"><font color="red">*</font></label>
                        <div class="col-sm-4">
                            <select class="form-control" name="jobGroup" >
                                <option value="1" >1</option>
                                <option value="2" >2</option>
                            </select>
                        </div>
                        <label for="lastname" class="col-sm-2 control-label"><font color="red">*</font></label>
                        <div class="col-sm-4"><input type="text" class="form-control" name="jobDesc" placeholder="1111" maxlength="50" ></div>
                    </div>
                    <div class="form-group">
                        <label for="firstname" class="col-sm-2 control-label">222222<font color="red">*</font></label>
                        <div class="col-sm-4">
                            <select class="form-control" name="executorRouteStrategy" >
                                <option value="3" >3</option>
                                <option value="4" >4</option>
                            </select>
                        </div>
                        <label for="lastname" class="col-sm-2 control-label">Cron<font color="red">*</font></label>
                        <div class="col-sm-4"><input type="text" class="form-control" name="jobCron" placeholder="0000000" maxlength="128" ></div>
                    </div>
                    <div class="form-group">
                        <label for="lastname" class="col-sm-2 control-label">23232323A<font color="red">*</font></label>
                        <div class="col-sm-4"><input type="text" class="form-control" name="author" placeholder="232323" maxlength="50" ></div>
                        <label for="lastname" class="col-sm-2 control-label">23232323B<font color="black">*</font></label>
                        <div class="col-sm-4"><input type="text" class="form-control" name="alarmEmail" placeholder="2323232" maxlength="100" ></div>
                    </div>
                    <div class="form-group">
                        <label for="firstname" class="col-sm-2 control-label">343434<font color="black">*</font></label>
                        <div class="col-sm-10">
                            <textarea class="textarea form-control" name="executorParam" placeholder="3434343" maxlength="512" style="height: 63px; line-height: 1.2;"></textarea>
                        </div>
                    </div>

                    <hr>
                    <div class="form-group">
                        <div class="col-sm-offset-5 col-sm-3">
                            <button type="submit" class="btn btn-primary"  >修改</button>
                            <button type="button" class="btn btn-default" data-dismiss="modal">取消</button>
                            <input type="hidden" name="id" >
                        </div>
                    </div>

                </form>
            </div>
        </div>
    </div>
</div>



	<!-- 引入通用javaScript -->
	<!-- jQuery 3 -->
	<script
		src="/jslib/adminlte/bower_components/jquery/dist/jquery.min.js"></script>
	<!-- Bootstrap 3.3.7 -->
	<script
		src="/jslib/adminlte/bower_components/bootstrap/dist/js/bootstrap.min.js"></script>
	<!-- AdminLTE App -->
	<script src="/jslib/adminlte/dist/js/adminlte.min.js"></script>
	<!--  引入自定义javaScript -->

	<script src="/jslib/codemirror/lib/codemirror.js"></script>
	<!--Java代码高亮必须引入-->
	<script src="/jslib/codemirror/mode/clike/clike.js"></script>
	<!--groovy代码高亮-->
	<script src="/jslib/codemirror/mode/groovy/groovy.js"></script>
	<!--python代码高亮必须引入-->
	<script src="/jslib/codemirror/mode/python/python.js"></script>
	<!--shell代码高亮必须引入-->
	<script src="/jslib/codemirror/mode/shell/shell.js"></script>
	<!--sql代码高亮必须引入-->
	<script src="/jslib/codemirror/mode/sql/sql.js"></script>
	<!--go代码高亮必须引入-->
	<script src="/jslib/codemirror/mode/go/go.js"></script>

	<!--支持代码折叠-->
	<script src="/jslib/codemirror/addon/fold/foldcode.js"></script>
	<script src="/jslib/codemirror/addon/fold/foldgutter.js"></script>
	<script src="/jslib/codemirror/addon/fold/brace-fold.js"></script>
	<script src="/jslib/codemirror/addon/fold/comment-fold.js"></script>
	<!--括号匹配-->
	<script src="/jslib/codemirror/addon/edit/matchbrackets.js"></script>
	<script src="/jslib/codemirror/addon/edit/closebrackets.js"></script>
	<!--支持代码联想提示-->
	<script src="/jslib/codemirror/addon/hint/show-hint.js"></script>
	<script src="/jslib/codemirror/addon/hint/anyword-hint.js"></script>

	<script th:inline="javascript">
		//根据DOM元素的id构造出一个编辑器
		var editor = CodeMirror(document.getElementById("ideWindow"), {
			extraKeys : {
				"Ctrl" : "autocomplete"
			}, //ctrl可以弹出提示
			mode : "JavaScript",
			mode : "text/x-python", //实现python代码高亮
			mode : "text/x-sh", //实现shell代码高亮
			mode : "text/x-java", //实现java代码高亮
			lineNumbers : true, //显示行号
			lineWrapping : false, //自动换行
			//line: true,
			styleActiveLine : true, // 选中行高亮
			theme : "dracula", //设置主题
			foldGutter : true,
			gutters : [ "CodeMirror-linenumbers", "CodeMirror-foldgutter", "CodeMirror-lint-markers" ],
			matchBrackets : true, //括号匹配
			autoCloseBrackets : true,
			hintOptions : {
				hint : synonyms
			}, // 自动提示配置
			lint : true, // 代码出错提醒
			indentUnit : 4, // 缩进配置（默认为2）
		//readOnly: true,        //只读
		});
		editor.setSize('100%', '550px');     //设置代码框的长宽
		//editor.setSize('100%', '100%');     //设置代码框的长宽

		//editor.setValue( [[${sourceCode}]] );    //先代码框的值清空
		//editor.setValue(obj.scriptCode);    //给代码框赋值
		//editor.setOption("readOnly", true);

		// 自动提示需要支持Pormise， 当当前数据的字符串满足comp中的某一个word时，会提示该word所在数组的词汇
		if (typeof Promise !== "undefined") {
			comp = [
					[ "here", "hither" ],
					[ "asynchronous", "nonsynchronous" ],
					[ "completion", "achievement", "conclusion", "culmination",
							"expirations" ],
					[ "hinting", "advive", "broach", "imply" ],
					[ "function", "action" ],
					[ "provide", "add", "bring", "give" ],
					[ "synonyms", "equivalents" ], [ "words", "token" ],
					[ "each", "every" ], ];
		}

		// 提示功能的代码， 可以适当修改来满足自己的需求
		function synonyms(cm, option) {
			return new Promise(function(accept) {
				setTimeout(function() {
					var cursor = cm.getCursor(), line = cm.getLine(cursor.line)
					var start = cursor.ch, end = cursor.ch
					while (start && /\w/.test(line.charAt(start - 1)))
						--start
					while (end < line.length && /\w/.test(line.charAt(end)))
						++end
					var word = line.slice(start, end)
					for (var i = 0; i < comp.length; i++) {
						if (comp[i].indexOf(word) != -1) {
							return accept({
								list : comp[i],
								from : CodeMirror.Pos(cursor.line, start),
								to : CodeMirror.Pos(cursor.line, end)
							});
						}
						return accept(null)
					}
				}, 10)
			})
		}
		
		// 额外配置快捷键
		editor.addKeyMap({
			'Ctrl-S' : function() {
				saveFunction();
			},
			'Ctrl-s' : function() {
				saveFunction();
			},
			'Ctrl-f' : autoFormatSelection,
		});

		//  自动格式化编辑器
		function autoFormatSelection() {
			CodeMirror.commands["selectAll"](editor);
			var range = getSelectedRange();
			editor.autoFormatRange(range.from, range.to);
			editor.commentRange(false, range.from, range.to);
			alert("autoFormatSelection");
		}
		
		// 获取编辑器中选中范围的的行号
		function getSelectedRange() {
			return {
				from : editor.getCursor(true),
				to : editor.getCursor(false)
			}
		}
		
	    // 处理saveFunction
        function saveFunction() {
	    	console.log("doing save...");
            alert("保存成功");
        }

		//editor.replaceSelection("内容");   // 替换选中的字符串、在光标处插入字符
		//editor.setSize('100%', '100%');     //设置代码框的长宽
		//CodeMirror.commands["selectAll"](editor);    // 执行内置的命令
		//CodeMirror.commands["goDocEnd"](editor)  //移动到文件尾部
		//editor.refresh();   	    // 插件不显示文本内容，直到点击才出现
		
		
		
		function editWebIdeTile() {
			$('#editTileModal').modal({backdrop: false, keyboard: false}).modal('show');
		}
		
		
		$(function(){
			editWebIdeTile();
		});
	</script>

</body>
</html>